<template>
  <div class="singer-category">
    <div v-for="(value,key) of singerCategory" :key="key">
      <ul class="content">
        <li
          v-for="(category,index) of value"
          :key="category.id"
          class="item"
          :class="{'singer-active':activeIndex[key]===index}"
          @click="categoryClick(key,index)"
        >{{category.name}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    singerCategory: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      activeIndex: {
        sex: 0,
        genre: 0,
        area: 0,
      },
    };
  },
  // created(){
  //     console.log(this.singerCategory)
  // },
  methods: {
    categoryClick(key, index) {
      this.activeIndex[key] = index;
      console.log(this.activeIndex);
      const params = {};
      for (let key in this.activeIndex) {
        params[key] = this.singerCategory[key][this.activeIndex[key]].id;
      }
      console.log(params);
      this.$emit("category-click", params);
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  color: rgba(26, 26, 26, 0.5);
  font-size: 16px;
  flex-wrap: wrap;
  list-style: none;
}
.item {
  padding: 1px 1px 1px 1px;
  margin: 5px 5px 5px 5px;
}
.singer-active {
  color: white;
  background-color: #07c160;
  border-radius: 0.4rem;
}
</style>